<template>
  <!-- 组织结构 表单页面 -->
  <div v-if="crud.status.cu > 0">
    <el-drawer
      v-loading="crud.editLoading"
      :title="crud.status.title"
      :visible.sync="crud.status.cu > 0"
      direction="rtl"
      :before-close="crud.cancelCU"
      :wrapper-closable="false"
      size="400px"
    >
      <div class="leisure-drawer__content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="110px"
        >

          <el-form-item label="组织名字" prop="depName">
            <el-input v-model="form.depName" placeholder="请输入组织名字" clearable />
          </el-form-item>

          <el-form-item label="组织机构代码" prop="depCode">
            <el-input v-model="form.depCode" placeholder="请输入组织机构代码" clearable />
          </el-form-item>

          <!-- 父类值 -->
          <el-form-item label="上级组织" prop="parentId">
            <dep-tree v-model="form.parentId" :dep-input-change="depSearchInput" :load-on-mounted="true" :value="form.parentId" />
          </el-form-item>

          <div v-show="moreField">
            <el-form-item label="负责人" prop="principal">
              <el-input v-model="form.principal" placeholder="请输入负责人" clearable />
            </el-form-item>

            <el-form-item label="联系电话" prop="linkPhone">
              <el-input v-model="form.linkPhone" placeholder="请输入联系电话" clearable />
            </el-form-item>

            <el-form-item label="省id" prop="provinceId">
              <el-input v-model="form.provinceId" placeholder="请输入省id" clearable />
            </el-form-item>

            <el-form-item label="市id" prop="cityId">
              <el-input v-model="form.cityId" placeholder="请输入市id" clearable />
            </el-form-item>

            <el-form-item label="县id" prop="countyId">
              <el-input v-model="form.countyId" placeholder="请输入县id" clearable />
            </el-form-item>

            <!-- 县级以上名字 ，中间用-分割 -->
            <el-form-item label="县级以上名字" prop="countyName">
              <el-input v-model="form.countyName" placeholder="请输入县级以上名字 ，中间用-分割" clearable />
            </el-form-item>

            <el-form-item label="详细地址" prop="depAddress">
              <el-input v-model="form.depAddress" placeholder="请输入详细地址" clearable />
            </el-form-item>

            <el-form-item label="组织描述" prop="description">
              <el-input v-model="form.description" placeholder="请输入组织描述" clearable />
            </el-form-item>
          </div>
          <!-- 状态  1可用 ：0 禁用 -->
          <!-- 状态值 -->
          <el-form-item label="状态" prop="status">
            <!-- 代码生成器生成的 默认从通用字典 common_status 里取值，其他情况，请手动修改-->
            <el-radio-group v-for="s in dict.common_status" :key="s.key" v-model="form.status">
              <el-radio :label="Number(s.key)">{{ s.value }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="排序"
            prop="paixu"
          >
            <el-input-number
              v-model.number="form.paixu"
              :min="0"
              :max="999"
              controls-position="right"
            />
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" clearable />
          </el-form-item>
          <div v-show="!moreField" class="form_more">
            <el-row :gutter="20">
              <el-col :span="8" :offset="16">
                <el-button size="small" icon="el-icon-arrow-down" @click="changeMoreStatus">展开非必项</el-button>
              </el-col>
            </el-row>
          </div>
          <div v-show="moreField" class="form_more">
            <el-row :gutter="20">
              <el-col :span="8" :offset="16">
                <el-button size="small" icon="el-icon-arrow-up" @click="changeMoreStatus">收起非必项</el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <div class="leisure-drawer__footer">
          <el-button
            @click="crud.cancelCU"
          >
            取消
          </el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import CRUD, { form } from '@crud/crud'
import DepTree from '@/views/components/depTree'
import { parentIdIsEnable } from '@/api/sys/Department'
// 组织结构 - model
const defaultForm = {
  id: null, // id
  depName: null, // 组织名字
  depCode: null, // 组织机构代码
  parentId: null,
  parentName: null, // 父级名字
  topId: null, // 顶级组织id
  level: null, // 组织结构级别 默认都是第一级，每往下一级加1
  logo: null, // 组织的logo
  principal: null, // 负责人
  linkPhone: null, // 联系电话
  provinceId: null, // 省id
  cityId: null, // 市id
  countyId: null, // 县id
  countyName: null, // 县级以上名字 ，中间用-分割
  depAddress: null, // 详细地址
  description: null, // 组织描述
  status: 1,
  paixu: 1,
  remark: null, // 备注
  lockVersion: 0,
  createUser: null
}
export default {
  components: {
    DepTree
  },
  mixins: [form(defaultForm)],
  dicts: [
    'sys_department_level',
    'common_status'
  ], // 字典
  data() {
    var validateParentId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择上级组织'))
      } else if (this.form.id) {
        parentIdIsEnable(this.form.id, value).then(res => {
          if (!res.data) {
            callback(new Error('指定的上级组织，不能是该组织自身和下级'))
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    }
    return {
      moreField: false,
      depTree: [],
      rules: {
        depName: [
          { required: true, message: '请选输入组织名称', trigger: 'blur' }
        ],
        depCode: [
          { required: true, message: '请选输入组织代码', trigger: 'blur' }
        ],
        paixu: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ],
        parentId: [
          { required: true, message: '请选择上级组织', trigger: 'change' },
          { validator: validateParentId, trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    [CRUD.HOOK.beforeToCU]() {

    },
    depSearchInput(value) {
      this.form.parentId = value
    },
    changeMoreStatus() {
      this.moreField = !this.moreField
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
  .form_more{
    margin: 0px 10px;
  }

</style>
